<template>
	<div class="slideNav-wrapper">
		<div class="slideNav-title">
			<div class="slideNav-title-sectionInfo">
				<span v-if="!searchVisble"> 完结 </span>
				<span v-if="!searchVisble"> 共{{navigation.length}}章</span>
				<span v-else class="searchByKeyTotal">共找到{{searchList.length}}条</span>
			</div>
			<div  v-if="!searchVisble" class="slideNav-title-desc">
				倒序
			</div>
		</div>
		<scroll ref="menuScroll" v-if="!searchVisble" :top="231" :bottom="100">
			<div slot="menu" class="slideNav-menu-wrapper">
				<div class="menu-item" v-for="(item,index) in navigation" :key="item.id" :class="{'selected':index === section}" @click="handleClickNavigationItem(item)">
					<span class="menu-item-label" :style="computeLabelMarginLeft(item)">
						{{item.label}}
					</span>
				</div>
			</div>
		</scroll>
		
		<scroll v-if="searchVisble" :top="231" :bottom="100">
			<div slot="menu" class="slideNav-search-wrapper slideNav-menu-wrapper">
				<div class="slideNav-search-item" v-for="(item) in searchList" :key="item.cfi" @click="handleClickSearchByKey(item)">
					<div class="search-item-title">
						第4章 龙有逆鳞，触之必死
					</div>
					<div class="search-item-content mt-10 mr-20" v-html="item.excerpt">
					</div>
				</div>
			</div>
		</scroll>
	</div>
</template>

<script>
	import {
		ebookMixin
	} from '../../utils/mixin.js';
	import Scroll from '@/components/common/Scroll.vue';
	import {pxTorem} from '@/utils/common.js';
	export default {
		name: 'ebookslideNav',
		mixins: [ebookMixin],
		components:{
			Scroll
		},
		props:{
			searchVisble:{
				type: Boolean,
				default: false
			},
			searchList:{
				type: Array,
			},
		},
		data() {
			return {
				navScrollDistance:0
			}
		},
		watch:{
			section() {
				// 使得高亮的标题处于较为理想的位置
				const navItemHeight = 56
				const basicNum = 3
				this.navScrollDistance = this.section * navItemHeight 
				if(this.section > basicNum) {
					this.navScrollDistance = this.navScrollDistance - basicNum * navItemHeight 
				}
			},
			settingVisible(val) {
				if(val === 3) {
					// 为3时scroll 才实例化 即才能设置偏移量  调用子组件方法
					this.$refs.menuScroll.scrollTo(0,this.navScrollDistance)
				}
			}
		},
		methods: {
			handleClickNavigationItem(item) {
				this.display(item.href,() => {
					// 设置sction
					this.handleInitSection(item.href)
					this.hideTitleAndMenu()
				})
			},
			handleClickSearchByKey(item) {
				this.display(item.cfi,() => {
					// 设置sction
					this.handleInitSection()
					this.hideTitleAndMenu()
					// 高亮显示
					this.currentBook.rendition.annotations.highlight(item.cfi)
				})
			},
			
			// 处理二级目录，三级目录等缩进距离
			computeLabelMarginLeft(item) {
				const distance = 18 // 缩进距离
				return {
					'marginLeft' : `${pxTorem(item.level * distance)}`
				}
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	@import '@/assets/styles/global.scss';
	
	.slideNav-wrapper {
		letter-spacing: pxTorem(1);
		.slideNav-title {
			@include  flexSpacebetween;
			padding: 0 pxTorem(20);
			height: pxTorem(40);
			border-bottom: pxTorem(1) solid #C7CFBD;
			box-sizing: border-box;
			.slideNav-title-sectionInfo {
				font-size: pxTorem(14);
				.searchByKeyTotal {
					color: #8D9686;
				}
			}
			.slideNav-title-desc {
				font-weight: bold;
			}
		}
		.slideNav-menu-wrapper {
			padding-left: pxTorem(20);
			box-sizing: border-box;
			.menu-item {
				@include  flexSpacebetween;
				border-bottom: pxTorem(1) solid #C7CFBD;
				height: pxTorem(55);
				&:last-child {
					border-bottom: none;
				}
				&.selected {
					.menu-item-label {
						color: #70973F;
					}
				}
				.menu-item-label {
					font-size: pxTorem(16);
					@include  overShowSpot;
				}
				
			}
		}
		.slideNav-search-wrapper {
			.slideNav-search-item {
				padding: pxTorem(15) 0;
				border-bottom: pxTorem(1) solid #C7CFBD;
				.search-item-title {
					font-size: pxTorem(14);
					color: #8D9686;
				}
				.search-item-content {
					font-size: pxTorem(16);
					@include  overShowSpotNum(2);
					line-height: pxTorem(20);
					.keyWord {
						color: #66943B;
					}
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
